<template>
  <div>
    <h1>promise</h1>
  </div>
</template>

<script>
export default {
  created() {
    console.log(window.Promise);
    const promise = new Promise((resovle, reject) => {
      console.log(0);
      // promise有三个状态 初始化 成功状态 失败状态
      let num = 8;
      if (num > 3) {
        console.log(1);
        // 将初始化状态转变为成功状态
        resovle("成功了");
        console.log(2);
      } else {
        console.log(3);
        // 将初始化状态转变为失败状态
        reject("失败");
        console.log(4);
      }
      //
    });
    console.log(promise);
    // .then 接收成功的值
    // .catch 接收失败的值
    // .finally 都会触发
    promise
      .then((data) => {
        console.log(5);
        console.log(data);
      })
      .catch((err) => {
        console.log(6);
        console.log(err);
      })
      .finally(() => {
        console.log(7);
        console.log("testfinally");
      });
    console.log("出错后是否执行1111 created");
    console.log(8);
    // .then .catch .finally的结果仍然是promise  链式调用
    setTimeout(() => {
      console.log(9);
    }, 0);
    /* 
    先执行同步代码 再执行异步代码  先执行异步微任务 在执行异步宏任务
    
    promise promise内部是同步代码  .then .catch .finally 异步微任务
    
    */

    /* 
   async await(等待)
   
   */
    async function fn() {
      console.log("async函数");
    }
    fn(); //函数调用
    // 函数的返回值  有return  如果有 return后面的值 如果没有 undefined
    let result = fn();
    console.log(result); //async 函数的返回值是promise
    // console.log(fn());
    /* async await 一起搭档使用  await后面跟promise */

    async function fun() {
      // await 接收的是promise成功的状态，不接受失败 报错
      try {
        let result1 = await new Promise((resolve, reject) => {
          let num = 6;
          if (num < 5) {
            resolve(num);
          } else {
            reject("失败");
          }
        });
        console.log(result1);
      } catch (error) {
        console.log(error);
      }
    }
    fun();
  },
  mounted() {
    console.log("出错后是否执行");
  },
};
</script>

<style lang="scss" scoped>
</style>